<template>
  <div class="container">
    <div class="img-wrapper">
      <img :src="this.$route.query.picUrl" alt="" />
    </div>
    <div class="img-avater">
      <img :src="this.$route.query.avater" alt="" />
      <span class="avaterName">{{ this.$route.query.username }}</span>
    </div>
    <div class="article-info">
      <h1 class="article-title">
        {{ this.$route.query.title }}
      </h1>
      <div class="article-top">
        <i></i>
        <p>{{ this.$route.query.enjoy }}</p>
      </div>
    </div>

    <div class="bottom-wrapper">
      <ul>
        <li>
          <i
            :class="isCollect ? 'canclecollect' : 'collect'"
            @click="ClickStar"
          ></i>
          <span>{{ this.$route.query.collect }}收藏</span>
        </li>
        <li>
          <i class="share"></i>
          <span>{{ this.$route.query.favour }}分享</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Travelarticles",
  computed: {
    ...mapState("travelraticles", ["isCollect"]),
  },
  methods: {
    ...mapActions("travelraticles", ["changeMsg", "changeIsCollect"]),
    //点击
    async ClickStar() {
      this.changeMsg();
    },
  },
  mounted() {
    this.changeIsCollect();
  },
};
</script>

<style lang='stylus' scoped>
.container {
  position: relative;
  width: 100%;

  .img-wrapper {
    width: 100%;
    height: 508px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .img-avater {
    position: absolute;
    bottom: 30px;
    left: 200px;

    img {
      widows: 120px;
      height: 120px;
      border-radius: 50%;
    }
  }

  .avaterName {
    color: #ff7200;
  }

  .bottom-wrapper {
    position: relative;
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #d7d7d7;
    box-shadow: 0 2px 0 rgba(0 0 0 0.05);

    ul {
      display: flex;
      position: absolute;
      right: 200px;
    }

    li {
      width: 120px;
      height: 65px;
      padding-top: 15px;
      text-align: center;
      border-left: 1px solid #e8e8e6;

      &:last-child {
        border-right: 1px solid #e8e8e6;
      }
    }

    li i {
      margin: 0 auto 14px;
      display: block;
      width: 25px;
      height: 24px;
      background-image: url('../../static/images/Travelarticles/sprite_v35.png');

      &.collect {
        cursor: pointer;
        background-position: -240px -576px;
        background-repeat: no-repeat;
      }

      &.canclecollect {
        cursor: pointer;
        background-position: -211px -576px;
        background-repeat: no-repeat;
      }

      &.share {
        cursor: pointer;
        background-position: -269px -576px;
      }
    }
  }

  .article-info {
    position: absolute;
    bottom: 85px;
    left: 350px;
    display: flex;
    justify-content: space-between;

    .article-title {
      width: 710px;
      font-size: 26px;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
    }

    .article-top {
      width: 70px;
      text-align: center;
      color: #fff;

      i {
        display: block;
        width: 38px;
        height: 33px;
        display: inline-block;
        margin-bottom: 5px;
        text-align: center;
        line-height: 32px;
        background: url('../../static/images/Travelarticles/sprite1.png');
        background-position: -60px 0 !important;
        font-size: 18px;
        text-shadow: 1px 0 1px #fcaf54;
      }

      p {
        font-size: 16px;
      }
    }
  }
}
</style>